<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .check{position: relative;width:24px;height:24px;}
        .check input[type=checkbox]{position: absolute;z-index: 1;width: 20px;height:20px;padding: 0px;margin: 0;border:none;left:2px;top:-2px;opacity: 0;}
        .check .myCheck{position: absolute;width:24px;height:24px;}
        .check .myCheck span{display: block;width: 20px;height:14px;background: #ccc;position:absolute;}
        .check .myCheck span:nth-child(1){border-radius: 7px 0 0 7px;transform: rotate(45deg);left:0;top:0;}
        .check .myCheck span:nth-child(2){border-radius: 0 7px 7px 0;transform: rotate(-45deg);right:0;top:0;}
    </style>
</head>
<body>
    <div id="app">
        <h3>{{title}}</h3>
        <ly-checkbox class="check" @getcheck="get"></ly-checkbox>
    </div>
</body>
<script src="../libs/vue.js"></script>

<template id="checkbox">
    <div>
        <input type="checkbox" @change="getCheck">
        <div class="myCheck" ref="spans">
            <span></span>
            <span></span>
        </div>
    </div>
</template>

<script>
    const checkbox = {
        template: "#checkbox",
        methods:{
            getCheck(event){
                this.$emit("getcheck", event.target.checked);
                if(event.target.checked){
                    this.$refs.spans.children[0].style.background = "red";
                    this.$refs.spans.children[1].style.background = "red";
                }else{
                    this.$refs.spans.children[0].style.background = "#ccc";
                    this.$refs.spans.children[1].style.background = "#ccc";
                }
            }
        }
    }


    new Vue({
        el:"#app",
        data(){
            return {
                title:"自定义复选框"
            }
        },
        components:{
            lyCheckbox: checkbox
        },
        methods:{
            get(flag){
                console.log("在父组件内获取复选框的状态为：", flag)
            }
        }
    })
</script>
</html>